import { useState } from 'react';
import './App.css';
import Button from './components/Button.jsx';
import logo from './logo.svg';

function App() {
    const heroes = [
        { name: 'Tony Stark' },
        { name: 'Peter Parker' },
        { name: 'Batman' },
    ];

    const [index, setIndex] = useState(0);

    const hero = heroes[index];

    function handleClick() {
        debugger;
        setIndex(index + 1);
    }

    return (
        <div className="App">
            <div>
                index: {index}, {hero.name}
            </div>
            <button onClick={handleClick}>next</button>
        </div>
    );
}

export default App;
